<template>
	<view class="container-bottom-btns">
		<swiper class="swiper" :indicator-dots="true" indicator-active-color="#fff" indicator-color="#999"
			:autoplay="true" :circular="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item" v-for="(item,index) in productInfo.product_img">
					<image :src="item | formatFile" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="product-info">
			<view class="product-name">
				<view class="tag" v-if="productInfo.put_type == 1">厂家</view>
				<view class="tag" v-if="productInfo.put_type == 2">二手</view>
				<view class="tag rent-out-tag" v-if="productInfo.put_type == 3">租赁</view>
				<text>{{productInfo.product_title}}</text>
			</view>
			<view class="price flex-y-center" v-if="productInfo.put_type !== 3">
				<view class="char">￥</view>
				<view class="">{{productInfo.show_price || 0}}</view>
			</view>
			<view class="price flex-y-center" v-else>
				<view class="rent-out-price" v-if="productInfo.product_type == 1">{{productInfo.hgProductEquipmentLease.hourRent}}/小时</view>
				<view class="rent-out-price" v-if="productInfo.product_type == 1">{{productInfo.hgProductEquipmentLease.classRent}}/台班</view>
				<view class="rent-out-price" v-if="productInfo.product_type == 1">{{productInfo.hgProductEquipmentLease.monthRent}}/月</view>
				
				<view class="rent-out-price" v-if="productInfo.product_type == 2">{{productInfo.hgProductMaterialLease.dayRent}}/日</view>
				<view class="rent-out-price" v-if="productInfo.product_type == 2">{{productInfo.hgProductMaterialLease.monthRent}}/月</view>
				<view class="rent-out-price" v-if="productInfo.product_type == 2">{{productInfo.hgProductMaterialLease.yearRent}}/年</view>
				
			</view>
			<view class="detail-info flex-x-bet-y-center">
				<text>{{productInfo.create_time.substring(0, 10)}} ｜ {{productInfo.province || ''}} {{productInfo.city || ''}}</text>
				<text>销量：{{[productInfo.sale_count]}}</text>
			</view>
		</view>

		<view class="safeguard-wrapper flex-x-bet-y-center" @tap="openContentPopup(1)">
			<view class="left-info">
				<view class="icons flex-y-center">
					<view class="icon flex-y-center">
						<image src="static/images/icon-product-safe.png" mode=""></image>
						<text>平台担保</text>
					</view>
					<view class="icon flex-y-center">
						<image src="static/images/icon-product-safe.png" mode=""></image>
						<text>安心交易</text>
					</view>
					<view class="icon flex-y-center">
						<image src="static/images/icon-product-safe.png" mode=""></image>
						<text>售后无忧</text>
					</view>
				</view>
				<view class="protect-text ellipsis">{{productInfo.guaranteeRules}}</view>
			</view>
			<u-icon name="arrow-right" size="30"></u-icon>
		</view>

		<view class="sku-wrapper">
			<view class="row flex-y-center" @tap="openSkuPopup" v-if="productInfo.product_type == 1 && productInfo.put_type == 1" >
				<text class="row-title">当前规格</text>
				<view class="flex-x-bet-y-center flex-1">
					<view class="row-content">{{currentSku.skuName}}</view>
					<u-icon name="arrow-right" size="30"></u-icon>
				</view>
			</view>
			<view class="row flex-y-center" @tap="openContentPopup(2)">
				<text class="row-title">运费规则</text>
				<view class="flex-x-bet-y-center flex-1">
					<view class="row-content">{{productInfo.freightRules}}</view>
					<u-icon name="arrow-right" size="30"></u-icon>
				</view>
			</view>
		</view>
		
		<!-- 企业 -->
		<view class="enterprise-info flex-y-center" v-if="productInfo.hgFirm.id">
			<image :src="productInfo.hgFirm.firmImgs.split(',')[0] | formatFile" class="avatar" mode=""></image>
			<view class="right-info">
				<view class="flex-x-bet-y-center">
					<view class="enterprise-name">{{productInfo.hgFirm.firmName}}</view>
					<image class="collect-icon" :src="`/static/images/icon-collect${productInfo.hgFirm.firmCollect == 1 ? '-1' : ''}.png`" mode="" @tap="toCollect(1)"></image>
				</view>
				<view class="flex-y-center">
					<text>联系人：</text>
					<text style="color: #333;">{{productInfo.hgFirm.contactName}}</text>
					<image v-if="productInfo.hgFirm.isReal == 1" src="/static/images/icon-realname.png" class="icon-realname" mode=""></image>
				</view>
				<view>
					<text>联系电话：</text>
					<text style="color: #333;">{{productInfo.hgFirm.contactPhone}}</text>
				</view>
			</view>
		</view>
		
		<!-- 个人 -->
		<view class="enterprise-info" v-else>
			<view class="right-info" style="min-height: auto;margin-left:0;">
				<view class="flex-y-center">
					<text>联系人：</text>
					<text style="color: #333;">{{productInfo.address_name}}</text>
				</view>
				<view style="padding-top: 20rpx;">
					<text>联系电话：</text>
					<text style="color: #333;">{{productInfo.address_phone}}</text>
				</view>
			</view>
		</view>
		

		<view class="tab-list flex-y-center">
			<view class="tab-item" :class="{'tab-active': tabIndex === index}" @tap="toggleTabIndex(index)"
				v-for="(item, index) in tabList" :key="index">{{item}}</view>
		</view>

		<view style="padding: 20rpx;background-color: #fff;" v-show="tabIndex == 0">
			<view class="product-param">
				<view class="param-item" v-for="(item, index) in productAttr" :key="index">
					<view class="param-name">{{item.title}}</view>
					<view class="param-content">{{item.value}}</view>
				</view>
			</view>
		</view>
		
		<view class="product-detail" v-show="tabIndex == 1">
			<image :src="item | formatFile" v-for="(item,index) in productInfo.intro" :key="index" class="detail-image" mode="widthFix"></image>
		</view>
		
		<view class="bottom-btn-wrapper flex-x-bet-y-center">
			<view class="handle-item flex-column-x-center" @tap="toCollect(2)">
				<image :src="`/static/images/icon-collect${productInfo.productCollect == 1 ? '-1' : ''}.png`" class="handle-icon" mode=""></image>
				<text>收藏</text>
			</view>
			<view class="handle-item flex-column-x-center" @tap="$myUni.navTo('/pages/other/report?id=' + id)">
				<image src="static/images/icon-report.png" class="handle-icon" mode=""></image>
				<text>举报</text>
			</view>
			<view class="handle-item flex-column-x-center" @tap="phoneCall">
				<image src="static/images/icon-phone.png" class="handle-icon" mode=""></image>
				<text>电话咨询</text>
			</view>
			<view class="handle-btns" v-if="productInfo.put_type !== 3 && productInfo.put_type">
				<view class="handle-btn btn2" @tap="openContentPopup(3)" v-if="productInfo.put_type == 2">平台担保</view>
				<view class="handle-btn" @tap="addProductDiff" v-if="productInfo.put_type == 1">加入对比</view>
				<view class="handle-btn btn2" @tap="openSkuPopup" v-if="productInfo.put_type == 1">立即购买</view>
			</view>
		</view>

		<u-popup :show="showContentPopup" mode="center" :close-on-click-overlay="true" :round="15"
			:safeAreaInsetBottom="false" @close="closeContentPopup">
			<view class="popup-content">
				<view class="title flex-xy-center">{{showContentType === 1 ? '平台保障' : showContentType === 2 ? '运费规则' : '担保信息'}}</view>
				<view class="content-text">{{showContentType == 1 ? productInfo.guaranteeRules : showContentType == 2 ? productInfo.freightRules : productInfo.guaranteeRules}}</view>
				<SubmitBtn text="确认" color="#06BB20"
					:customStyle="{'font-size': '28rpx', width: '460rpx', height: '80rpx'}" @tap="closeContentPopup">
				</SubmitBtn>
			</view>
		</u-popup>
		
		<u-popup :show="showSkuPopup" mode="bottom" :close-on-click-overlay="true" :round="15" @close="closeSkuPopup">
			<view class="sku-popup">
				<view class="title">选择规格</view>
				<view class="sku-info flex-y-center">
					<image :src="productInfo.product_img[0] | formatFile" mode="" class="product-cover"></image>
					<view class="sku-right-info">
						<view class="price">￥{{currentSku.skuPrice}}</view>
						<view>库存：{{currentSku.skuStock}}</view>
						<view>{{currentSku.skuName}}</view>
					</view>
				</view>
				
				<view class="sku-list">
					<view class="sku-list-title">商品规格</view>
					<view class="flex-y-center" style="flex-wrap: wrap;">
						<view class="sku-item" :class="{'sku-active': currentSku.id === item.id}" @tap="chooseSku(item)"  v-for="(item, index) in productInfo.hgProductSkuList" :key="item.id">{{item.skuName}}</view>
					</view>
				</view>
				
				<view class="flex-x-bet-y-center counter">
					<text>数量</text>
					<u-number-box :buttonSize="45" :inputWidth="50" v-model="count" @change="buyCountChange"></u-number-box>
				</view>
				
				<SubmitBtn text="立即购买" @tap="toBuy"></SubmitBtn>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import { phoneCall, toast } from '../../utils/uni-api'
	import { productDetail, addProductDiff } from '@/api/product.js'
	import { collect } from '@/api/user.js'
	export default {
		data() {
			return {
				showContentPopup: false,
				showSkuPopup: false,
				showContentType: 1, // 1平台保障 2运费规则 3担保信息
				tabIndex: 0,
				tabList: ['商品参数', '商品详情'],
				count: 0,
				isUsed: true , // 是否是二手
				isPersonalUsed: false, // 是否是个人二手
				id: '',
				productInfo: {
					create_time: '',
					product_img: [],
					firmImgs: '',
					intro:[],
					hgProductEquipmentLease:{},
					hgProductMaterialLease: {},
					hgProductEquipmentSell: {},
					hgProductMaterialSell: {},
					hgProductSkuList: [],
					hgFirm: {}
				},
				productAttr: [],
				currentSku:{}
			}
		},
		onLoad(option){
			this.id = option.id
			this.getProductDetail()
		},
		methods: {
			getProductDetail(){
				productDetail({id: this.id}).then(res => {
					this.productInfo = res.result
					this.productInfo.product_img = this.productInfo.product_img.split(",")
					this.productInfo.firmImgs = this.productInfo.firmImgs ? this.productInfo.firmImgs.split(",")[0] : ''
					this.productInfo.intro = this.productInfo.intro.split(',')
					this.productAttr = JSON.parse(res.result.product_attr)
					// 厂家设备
					if(res.result.is_sku){
						this.currentSku = res.result.hgProductSkuList[0]
					}
				})
			},
			chooseSku(item){
				this.currentSku = item
			},
			toCollect(type){
				let params = {
					collectType: type
				}
				// 企业收藏
				if(type == 1){
					params.id = this.productInfo.hgFirm.id
				}else{
					params.id = this.productInfo.id
				}
				collect(params).then(res => {
					//企业
					if(type == 1){
						this.productInfo.hgFirm.firmCollect = this.productInfo.hgFirm.firmCollect == 1 ? 0 : 1
					}else{
						this.productInfo.productCollect = this.productInfo.productCollect == 1 ? 0 : 1
					}
					toast('操作成功', true)
				})
			},
			addProductDiff(){
				addProductDiff({productId: this.id}).then(res => {
					toast('添加成功', true)
				}).finally(() => {
					setTimeout(() => {
						this.$myUni.navTo('/pages/product/list-compare')
					}, 800)
				})
			},
			toggleTabIndex(index) {
				this.tabIndex = index
			},
			openContentPopup(type) {
				this.showContentType = type
				this.showContentPopup = true
			},
			closeContentPopup() {
				this.showContentPopup = false
				// 支付担保金
				if(this.showContentType === 3){
					this.$myUni.navTo('/pages/order/order-security')
				}
			},
			phoneCall(){
					uni.showModal({
						title:'提示',
						content: '是否电话咨询？',
						success: res => {
							if(res.confirm){
								let phone = this.productInfo.hgFirm.id ? this.productInfo.hgFirm.contactPhone : this.productInfo.address_phone
								phoneCall(phone)
							}
						}
					})
			},
			openSkuPopup(){
				this.showSkuPopup = true
			},
			closeSkuPopup(){
				this.showSkuPopup = false
			},
			buyCountChange(e){
				console.log(e);
			},
			toBuy(){
				this.$myUni.navTo('/pages/order/order-confirm')
			}
		}
	}
</script>

<style lang="scss">
	.swiper {
		padding-top: 0;
		height: 600rpx;
		border-radius: 29rpx;


		.swiper-item,
		image {
			width: 100%;
			height: 100%;
		}
	}

	.product-info {
		position: relative;
		z-index: 1;
		margin-top: -40rpx;
		background: #FFFFFF;
		border-radius: 19rpx 19rpx 0rpx 0rpx;
		padding: 40rpx 30rpx;


		.product-name {

			font-weight: bold;
			font-size: 33rpx;
			color: #333333;
			line-height: 55rpx;
			word-break: break-all;

			.tag {
				position: relative;
				top: -5rpx;
				flex-shrink: 0;
				display: inline-block;
				text-align: center;
				width: 67rpx;
				line-height: 37rpx;
				background: linear-gradient(44deg, #F1873D 0%, #F42D1F 100%);
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				font-weight: bold;
				font-size: 22rpx;
				color: #FFFFFF;
				margin-right: 20rpx;
			}
			
			.rent-out-tag{
				background: linear-gradient( 44deg, #2BDEDA 0%, #07BAB7 100%);
			}
		}

		.price {
			font-weight: 800;
			font-size: 35rpx;
			color: #F42D1F;
			padding: 40rpx 0;

			.char {
				font-weight: normal;
				font-size: 26rpx;
			}
			
			.rent-out-price{
				margin-right: 30rpx;
			}
		}

		.detail-info {
			font-weight: 500;
			font-size: 27rpx;
			color: #666666;
		}


	}

	.safeguard-wrapper {
		padding: 40rpx 30rpx;
		margin: 20rpx 0;
		background-color: #fff;

		.icon {
			font-size: 25rpx;
			color: #333333;
			margin-right: 50rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
			}
		}

		.protect-text {
			width: 650rpx;
			color: #333333;
			font-size: 25rpx;
			padding-top: 30rpx;
			word-break: break-all;
		}
	}

	.sku-wrapper {
		margin: 20rpx 0;
		padding: 0 30rpx;
		background-color: #fff;

		.row {
			padding: 30rpx 0;
			border-bottom: 1rpx solid #EBEBEB;
			;

			.row-title {
				font-weight: 500;
				font-size: 27rpx;
				color: #666666;
				margin-right: 30rpx;
			}

			.row-content {
				font-weight: 500;
				font-size: 27rpx;
				color: #333333;
			}
		}

	}

	.enterprise-info {
		padding: 35rpx 30rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		.avatar {
			width: 150rpx;
			height: 150rpx;
			flex-shrink: 0;
			border-radius: 50%;
		}

		.right-info {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;
			margin-left: 30rpx;
			color: #808080;
			font-size: 27rpx;
			min-height: 130rpx;
			padding: 10rpx 0;

			.enterprise-name {
				font-weight: normal;
				font-size: 33rpx;
				color: #333333;
			}
			
			.collect-icon{
				width: 36rpx;
				height: 36rpx;
			}

			.icon-realname {
				width: 80rpx;
				height: 30rpx;
				margin-left: 20rpx;
			}
		}
	}

	.tab-list {
		font-weight: 500;
		font-size: 29rpx;
		color: #808080;
		background-color: #fff;
		padding: 30rpx 0;
		margin: 20rpx 0 0;

		.tab-item {
			flex: 1;
			text-align: center;

		}

		.tab-active {
			font-weight: bold;
			color: #333333;
		}
	}

	.product-param {
		display: table;
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		border-collapse: collapse;

		.param-item {
			display: table-row;
			font-size: 29rpx;
			

			.param-name {
				border: 1rpx solid #F4F6FF;
				display: table-cell;
				background-color: #F4F6FF;
				color: #808080;
				width: 200rpx;
				text-align: center;
				padding: 20rpx 0;
			}

			.param-content {
				display: table-cell;
				padding: 20rpx 0 20rpx 20rpx;
				border: 1rpx solid #F4F6FF;
			}
		}
	}
	
	.product-detail{
		
		image{
			display: block;
			width: 100%;
			
		}
	}
	
	.bottom-btn-wrapper{
		border-top: 1rpx solid #EBEBEB;
		
		.handle-item{
			font-weight: 500;
			font-size: 21rpx;
			color: #333333;
			flex:1;
			
			.handle-icon{
				width: 36rpx;
				height: 36rpx;
				margin-bottom: 8rpx;
			}
		}
		
		.handle-btns{
			width: 400rpx;
			display: flex;
			height: 81rpx;
			border-radius: 40rpx;
			overflow: hidden;
			border: 2rpx solid $theme-color;
			margin-left: 20rpx;
			
			.handle-btn{
				display: flex;
				justify-content: center;
				align-items: center;
				flex:1;
				font-weight: normal;
				font-size: 31rpx;
				color: $theme-color;
			}
			
			.btn2{
				background-color: $theme-color;
				color: #fff;
			}
		}
		
	}

	.popup-content {
		width: 577rpx;
		background: #FFFFFF;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		padding: 50rpx 35rpx 40rpx;
		box-sizing: border-box;
		

		.title {
			font-size: 33rpx;
			color: #333333;
			font-weight: bold;
		}

		.content-text {
			max-height: 700rpx;
			overflow-y: auto;
			font-weight: normal;
			font-size: 27rpx;
			color: #333333;
			line-height: 38rpx;
			margin: 30rpx 0;
			min-height: 300rpx;
		}
	}
	
	.sku-popup{
		padding: 20rpx 30rpx;
		background-color: #fff;
		
		.title{
			font-size: 33rpx;
			color: #333333;
			font-weight: bold;
			text-align: center;
		}
		
		.sku-info{
			padding-top: 40rpx;
			
			.product-cover{
				width: 150rpx;
				height: 150rpx;
			}
			
			.sku-right-info{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				color: #333;
				font-size: 27rpx;
				padding: 10rpx 0;
				margin-left: 30rpx;
				min-height: 130rpx;
				
				.price{
					font-weight: 800;
					font-size: 30rpx;
					color: #F42D1F;
				}
			}
		}
		
		.sku-list{
			margin-top: 30rpx;
			min-height: 400rpx;
			overflow-y: auto;
			
			.sku-list-title{
				font-size: 30rpx;
			}
			
			.sku-item{
				display: flex;
				background: #F0F0F0;
				border-radius: 35rpx;
				border: 1rpx solid #EBEBEB;
				padding: 10rpx 25rpx;
				font-size: 25rpx;
				color: #333333;
				margin-right: 20rpx;
				margin-top: 20rpx;
			}
			
			.sku-active{
				border: 1rpx solid #FFD9C9;
				background: #FFF0EA;
				color: $theme-color;
			}
		}
		
		.counter{
			padding-top: 30rpx;
			font-size: 30rpx;
			padding-bottom: 50rpx;
		}
	}
</style>